<template>
  <div class="Song-list">
    <div class="Song">
      <div class="Song-item" v-for="(value, index, key) in song" :key="key">
        <img :src="value.imgSrc" alt="" />
        <div class="right">
          <p class="title">{{ value.title }}</p>
          <p class="num">
            <van-icon name="service-o" /><span style="margin-left: 0.05rem">{{
              value.num
            }}</span>
          </p>
        </div>
        <van-icon name="arrow" color="blue" style="margin-top: 0.7rem" />
      </div>
    </div>

    <div></div>
  </div>
</template>
<script>
export default {
  name: "Song",
  data() {
    return {
      song: null,
    };
  },
  methods: {
    date() {
      this.song = data.list;
    },
  },
  created() {
    this.date();
  },
};
var Mock = require("mockjs");
var data = Mock.mock({
  "list|10-15": [
    {
      title: "@csentence(7, 15)",
      imgSrc: "@image('150x100', '@color()'",
      num: "@zip(5)",
    },
  ],
});
</script>
<style scoped>
.Song {
  width: 100vw;
  height: 200vw;
  margin-top: 2.4rem;
  overflow: scroll;
  z-index: 0;
  overflow: hidden;
}
.Song-item {
  width: 100vw;
  display: flex;
  margin-top: 0.2rem;
  padding: 0.1rem;
  border-bottom: 1px solid #f2f3f4;
  box-sizing: border-box;
}
img {
  width: 2rem;
  height: 1.5rem;
}
.right {
  width: 50vw;
  margin: 0 0.4rem;
  position: relative;
}
.title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.num {
  position: absolute;
  bottom: 0;
}
</style>
